<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Example 3 - jFrame</title>

	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

	<!--[if lt IE 7]>
		<link rel="stylesheet" href="css/ie_lt_7.css" type="text/css" />
	<![endif]-->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="javascripts/v1/core/jFrame.js"></script>
	
	
	<script type="text/javascript">
		$(document).ready(function() {
			
			$.jFrame.start('hideshow', function(){
				$('div.hideshowWidget').Example().HideShow();
			});
		});
	</script>

</head>
<body>

	<div id="wrapper" class="container_12 clear">

		<div class="column grid_12">
			<h1>Example 3 - <em>Using jFrame and jQuery selectors</em></h1>
		</div>

		<div class="column grid_7">
			
			<p>jFrame has loaded in a Hide and Show script through jFrame.</p>

			<p>Using jFrame we now only load two javascript files in the HTML header: jQuery and jFrame. All other javascript files loaded by jFrame.</p>

	

			<div class="hideshowWidget">
				<p><a href="#" rel="hs_trigger" class="hs_vert closed">Show content</a></p>
				<div class="hs_widget">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
						
					</p>
				</div>
			</div>

		</div>

		<div class="column grid_5 spotlight">
			<div>
				<h2>Uncoupling javascript from HTML</h2>
				<p>This example is from an article on uncoupling HTML and javascript using
					a jQuery script called jFrame.</p>
				
				<ul>
					<li><a href="../Documentation/How_to_use.html">Read the article: Uncoupling javascript from HTML</a></li>
				</ul>
				
				<h2>Examples</h2>
				<ul>
					<li><a href="example1.html">Example 1</a></li>
					<li><a href="example2.html">Example 2</a></li>
					<li><a href="example3.html">Example 3</a></li>
					<li><a href="example4.html">Example 4</a></li>
				</ul>
				
			</div>
		</div>
	</div>
</body>
</html>

